<!-- BEGIN: Subheader -->
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">
                系统监控
            </h3>
            <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                <li class="m-nav__item m-nav__item--home">
                    <a href="#" class="m-nav__link m-nav__link--icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div>
        </div>
    </div>
</div>
<!-- END: Subheader -->

<div class="m-content">

    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        应用程序资源监控
                    </h3>
                </div>
            </div>
            <div class="m-portlet__head-tools">
                <button class="btn btn-primary float-right" (click)="refresh()">
                    <span class="fa fa-refresh"></span> <span>刷新</span>
                </button>
            </div>
        </div>
        <div class="m-portlet__body">
            <div>
                <h3>JVM 资源监控</h3>
                <div class="row" *ngIf="!updatingMetrics">
                    <div class="col-md-4">
                        <b >内存</b>
                        <p><span>总内存</span> ({{metrics.gauges['jvm.memory.total.used'].value / 1000000 | number:'1.0-0'}}M / {{metrics.gauges['jvm.memory.total.max'].value / 1000000 | number:'1.0-0'}}M)</p>
                        <ngb-progressbar type="success" [max]="metrics.gauges['jvm.memory.total.max'].value" [value]="metrics.gauges['jvm.memory.total.used'].value" [striped]="true" [animated]="true">
                            <span>{{metrics.gauges['jvm.memory.total.used'].value * 100 / metrics.gauges['jvm.memory.total.max'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                        <p><span>堆内存</span> ({{metrics.gauges['jvm.memory.heap.used'].value / 1000000 | number:'1.0-0'}}M / {{metrics.gauges['jvm.memory.heap.max'].value / 1000000 | number:'1.0-0'}}M)</p>
                        <ngb-progressbar [max]="metrics.gauges['jvm.memory.heap.max'].value" [value]="metrics.gauges['jvm.memory.heap.used'].value" [striped]="true" [animated]="true" type="success">
                            <span>{{metrics.gauges['jvm.memory.heap.used'].value * 100 / metrics.gauges['jvm.memory.heap.max'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                        <p><span>非堆内存</span> ({{metrics.gauges['jvm.memory.non-heap.used'].value / 1000000 | number:'1.0-0'}}M / {{metrics.gauges['jvm.memory.non-heap.committed'].value / 1000000 | number:'1.0-0'}}M)</p>
                        <ngb-progressbar [max]="metrics.gauges['jvm.memory.non-heap.committed'].value" [value]="metrics.gauges['jvm.memory.non-heap.used'].value" [striped]="true" [animated]="true" type="success">
                            <span>{{metrics.gauges['jvm.memory.non-heap.used'].value * 100 / metrics.gauges['jvm.memory.non-heap.committed'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                    </div>
                    <div class="col-md-4">
                        <b >线程</b> (Total: {{metrics.gauges['jvm.threads.count'].value}}) <a class="hand" (click)="refreshThreadDumpData()" data-toggle="modal" data-target="#threadDump"><i class="fa fa-eye"></i></a>
                        <p><span>可运行</span> {{metrics.gauges['jvm.threads.runnable.count'].value}}</p>
                        <ngb-progressbar [value]="metrics.gauges['jvm.threads.runnable.count'].value" [max]="metrics.gauges['jvm.threads.count'].value" [striped]="true" [animated]="true" type="success">
                            <span>{{metrics.gauges['jvm.threads.runnable.count'].value * 100 / metrics.gauges['jvm.threads.count'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                        <p><span >定时等待</span> ({{metrics.gauges['jvm.threads.timed_waiting.count'].value}})</p>
                        <ngb-progressbar [value]="metrics.gauges['jvm.threads.timed_waiting.count'].value" [max]="metrics.gauges['jvm.threads.count'].value" [striped]="true" [animated]="true" type="warning">
                            <span>{{metrics.gauges['jvm.threads.timed_waiting.count'].value * 100 / metrics.gauges['jvm.threads.count'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                        <p><span>等待中</span> ({{metrics.gauges['jvm.threads.waiting.count'].value}})</p>
                        <ngb-progressbar [value]="metrics.gauges['jvm.threads.waiting.count'].value" [max]="metrics.gauges['jvm.threads.count'].value" [striped]="true" [animated]="true" type="warning">
                            <span>{{metrics.gauges['jvm.threads.waiting.count'].value * 100 / metrics.gauges['jvm.threads.count'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                        <p><span>阻塞中</span> ({{metrics.gauges['jvm.threads.blocked.count'].value}})</p>
                        <ngb-progressbar [value]="metrics.gauges['jvm.threads.blocked.count'].value" [max]="metrics.gauges['jvm.threads.count'].value" [striped]="true" [animated]="true" type="success">
                            <span>{{metrics.gauges['jvm.threads.blocked.count'].value * 100 / metrics.gauges['jvm.threads.count'].value  | number:'1.0-0'}}%</span>
                        </ngb-progressbar>
                    </div>
                    <div class="col-md-4">
                        <b>垃圾回收</b>
                        <div class="row" *ngIf="metrics.gauges['jvm.garbage.PS-MarkSweep.count']">
                            <div class="col-md-9">标记清除次数</div>
                            <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-MarkSweep.count'].value}}</div>
                        </div>
                        <div class="row" *ngIf="metrics.gauges['jvm.garbage.PS-MarkSweep.time']">
                            <div class="col-md-9">标记清除耗时</div>
                            <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-MarkSweep.time'].value}}ms</div>
                        </div>
                        <div class="row" *ngIf="metrics.gauges['jvm.garbage.PS-Scavenge.count']">
                            <div class="col-md-9">回收次数</div>
                            <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-Scavenge.count'].value}}</div>
                        </div>
                        <div class="row" *ngIf="metrics.gauges['jvm.garbage.PS-Scavenge.time']">
                            <div class="col-md-9">回收耗时</div>
                            <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-Scavenge.time'].value}}ms</div>
                        </div>
                    </div>
                </div>
                <div class="well well-lg" *ngIf="updatingMetrics">更新中...</div>

                <h3>HTTP 请求 (事件 / 秒)</h3>
                <p *ngIf="metrics.counters">
                    <span>使用中请求:</span> <b>{{metrics.counters['com.codahale.metrics.servlet.InstrumentedFilter.activeRequests'].count | number:'1.0-0'}}</b> - <span>请求总数</span> <b>{{metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count | number:'1.0-0'}}</b>
                </p>
                <div class="table-responsive" *ngIf="!updatingMetrics">
                    <table class="table m-table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>状态码</th>
                            <th>次数</th>
                            <th class="text-right">平均数</th>
                            <th class="text-right"><span>平均值</span> (1 min)</th>
                            <th class="text-right"><span>平均值</span> (5 min)</th>
                            <th class="text-right"><span>平均值</span> (15 min)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2xx (成功)</td>
                            <td>
                                <ngb-progressbar [max]="metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count" [value]="metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].count" [striped]="true" [animated]="true" type="success">
                                    <span>{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].count}}</span>
                                </ngb-progressbar>
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].mean_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m1_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m5_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m15_rate) | number:'1.0-2'}}
                            </td>
                        </tr>
                        <tr>
                            <td>4xx (请求错误)</td>
                            <td>
                                <ngb-progressbar [max]="metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count" [value]="metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].count" [striped]="true" [animated]="true" type="success">
                                    <span>{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].count}}</span>
                                </ngb-progressbar>
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].mean_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m1_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m5_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m15_rate) | number:'1.0-2'}}
                            </td>
                        </tr>
                        <tr>
                            <td>5xx (服务器错误)</td>
                            <td>
                                <ngb-progressbar [max]="metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count" [value]="metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].count" [striped]="true" [animated]="true" type="success">
                                    <span>{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].count}}</span>
                                </ngb-progressbar>
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].mean_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m1_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m5_rate) | number:'1.0-2'}}
                            </td>
                            <td class="text-right">
                                {{filterNaN(metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m15_rate) | number:'1.0-2'}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3>服务统计 (时间单位为毫秒)</h3>
                <div class="table-responsive" *ngIf="!updatingMetrics">
                    <table class="table m-table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>服务名称</th>
                            <th class="text-right">计数</th>
                            <th class="text-right">平均值</th>
                            <th class="text-right">最小值</th>
                            <th class="text-right">p50</th>
                            <th class="text-right">p75</th>
                            <th class="text-right">p95</th>
                            <th class="text-right">p99</th>
                            <th class="text-right">最大值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let entry of servicesStats | keys">
                            <td>{{entry.key}}</td>
                            <td class="text-right">{{entry.value.count}}</td>
                            <td class="text-right">{{entry.value.mean * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.min * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.p50 * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.p75 * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.p95 * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.p99 * 1000 | number:'1.0-0'}}</td>
                            <td class="text-right">{{entry.value.max * 1000 | number:'1.0-0'}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3>Cache 统计</h3>
                <div class="table-responsive" *ngIf="!updatingMetrics">
                    <table class="table m-table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>缓存名称</th>
                            <th class="text-right">缓存命中</th>
                            <th class="text-right">缓存未命中</th>
                            <th class="text-right">缓存获取</th>
                            <th class="text-right">缓存装入</th>
                            <th class="text-right">缓存清除</th>
                            <th class="text-right">缓存Evictions(驱逐)</th>
                            <th class="text-right">缓存命中 %</th>
                            <th class="text-right">缓存未命中 %</th>
                            <th class="text-right">平均获取时间 (µs)</th>
                            <th class="text-right">平均装入时间 (µs)</th>
                            <th class="text-right">平均清除时间 (µs)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let entry of cachesStats | keys">
                            <td>{{entry.key}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-hits'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-misses'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-gets'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-puts'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-removals'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-evictions'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-hit-percentage'].value}}</td>
                            <td class="text-right">{{metrics.gauges[entry.key + '.cache-miss-percentage'].value }}</td>
                            <td class="text-right">{{filterNaN(metrics.gauges[entry.key + '.average-get-time'].value)  | number : '1.2-2' }}</td>
                            <td class="text-right">{{filterNaN(metrics.gauges[entry.key + '.average-put-time'].value)  | number : '1.2-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.gauges[entry.key + '.average-remove-time'].value) | number : '1.2-2' }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 *ngIf="metrics.gauges && metrics.gauges['HikariPool-1.pool.TotalConnections'] && metrics.gauges['HikariPool-1.pool.TotalConnections'].value > 0">数据源统计 (时间单位为毫秒)</h3>
                <div class="table-responsive" *ngIf="!updatingMetrics && metrics.gauges && metrics.gauges['HikariPool-1.pool.TotalConnections'] && metrics.gauges['HikariPool-1.pool.TotalConnections'].value > 0">
                    <table class="table m-table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th><span>用法</span> ({{metrics.gauges['HikariPool-1.pool.ActiveConnections'].value}} / {{metrics.gauges['HikariPool-1.pool.TotalConnections'].value}})</th>
                            <th class="text-right">计数</th>
                            <th class="text-right">平均值</th>
                            <th class="text-right">最小值</th>
                            <th class="text-right">p50</th>
                            <th class="text-right">p75</th>
                            <th class="text-right">p95</th>
                            <th class="text-right">p99</th>
                            <th class="text-right">最大值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="progress progress-striped">
                                    <ngb-progressbar [max]="metrics.gauges['HikariPool-1.pool.TotalConnections'].value" [value]="metrics.gauges['HikariPool-1.pool.ActiveConnections'].value" [striped]="true" [animated]="true" type="success">
                                        <span>{{metrics.gauges['HikariPool-1.pool.ActiveConnections'].value * 100 / metrics.gauges['HikariPool-1.pool.TotalConnections'].value  | number:'1.0-0'}}%</span>
                                    </ngb-progressbar>
                                </div>
                            </td>
                            <td class="text-right">{{metrics.histograms['HikariPool-1.pool.Usage'].count}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].mean) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].min) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].p50) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].p75) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].p95) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].p99) | number:'1.0-2'}}</td>
                            <td class="text-right">{{filterNaN(metrics.histograms['HikariPool-1.pool.Usage'].max) | number:'1.0-2'}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



